<template>
	<div class="questions">
		
		<div class="questions-div6">
			
			<div class="questions-body6 ">
				<div class="tr6"  v-for="(item,index) in body">
					<div class="tr-div"
						v-for="(twoitem,twoindex) in item"
						:style="{'background':twoitem.ticolor}"
						:class="{
							'tr-right' : (index==0 || index==2 || index==4 || index==5 || index==6) && twoindex ==2,
							'tr-below' : (index==1 || index==3) && twoindex !=2,
							'tr-rightbelow' : (index==1 || index==3) && twoindex ==2,				
						}"
					>
						<input type="number"  disabled  v-if="twoitem.type==0"  v-model="twoitem.value" />
						
						<input type="number"
							 :class="index == xindex && twoindex == xindex1  ? 'bagcolor': ''"
							 class="pitchon " @click="userinputClick(index,twoindex)"  disabled  v-if="twoitem.type==1  && bijishow == 0"  v-model="twoitem.uservalue" />
						<view class="bijique" v-if="twoitem.type==1 && bijishow == 1" @click="userinputClick(index,twoindex)"  :class="index == xindex && twoindex == xindex1  ? 'bagcolor': ''">
							<view v-for="(item,index) in twoitem.biji">{{item}}</view>	
						</view>	
						
						<image  class="dotted left01 lefticon icon" v-if="twoitem.direction  == 'lefticon'" src="../../static/record/left.png" />
						<image  class="dotted right01 righticon icon" v-if="twoitem.direction  == 'righticon'" src="../../static/record/left.png"/>
						<image  class="dotted top01 topicon icon" v-if="twoitem.direction  == 'topicon'" src="../../static/record/left.png"/>
						<image  class="dotted bottom01 bottomicon icon" v-if="twoitem.direction  == 'bottomicon'" src="../../static/record/left.png"/>
											
											
						<image  class="dotted left01 lefticon icon" v-if="twoitem.direction1  == 'lefticon'" src="../../static/record/left.png"/>
						<image  class="dotted right01 righticon icon" v-if="twoitem.direction1  == 'righticon'" src="../../static/record/left.png"/>
						<image  class="dotted top01 topicon icon" v-if="twoitem.direction1  == 'topicon'" src="../../static/record/left.png"/>
						<image  class="dotted bottom01 bottomicon icon" v-if="twoitem.direction1  == 'bottomicon'" src="../../static/record/left.png"/>
											
								
					</div>
				
				</div>
				
			</div>
		</div>
		
		
		
	</div>
</template>

<script>
	export default {
		props: ['body','bijishow'],
		watch:{
			body(e){
				this.body  = e;
			}
		},
		data() {
			return {
				type : 0, 
				xindex : null,
				xindex1 : null
			}
		},
		created() {
			console.log(this.body);
		},
		methods:{
			userinputClick(index,index1){
				this.xindex = index;
				this.xindex1 = index1;
				this.$emit('userinputChange',{'index':index,'index1':index1});
			},
		}
	}
</script>

<style >
	
@import url("@/common/css/questions.css");
	.questions {
		display: flex;	
		
	}
	
	.questions-div6 {
		width: 738rpx;
		height: 780rpx;
		margin: auto;
	}
	.questions-body6 {
		width: 708rpx;
		height: 708rpx;
		border: 2px solid #000;
		box-shadow: inset 2rpx 2rpx 0 #e3e4e5;
		margin: auto;
		display: flex;
		flex-direction: column;
	}
	.tr6 {
		display: flex;
		flex: 1;
	}
	.bagcolor {
		background-color: #edff38;
		width: 98% !important;
		height: 98% !important;
	}
	.icon {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
	}
	
	.lefticon {
		margin-left: -24rpx;
		margin-top: -80rpx;
	}
	.righticon {
		transform: rotate(180deg);
		margin-top: 20rpx;
		margin-left: 68rpx;
	}
	.topicon {
		transform: rotate(270deg);
		margin-top: -20rpx;
		margin-left: 36rpx;
	}
	.bottomicon {
		transform: rotate(90deg);
		margin-top: -136rpx;
		margin-left: 38rpx;
	}
	.tr-div > input {
		font-size: 60rpx !important;
	}
</style>